<div id="app">{{title}}</div>

<script>
  function h(tag, props, children) {
    return {
      tag,
      props,
      children
    }
  }
  // 填充代码
  // 1. 基本结构
  const Vue = {
    // 拓展性
    createRenderer({
      querySelector,
      insert,
      createElement,
      remove
    }) {
      // 返回渲染器
      return {
        createApp(options) {
          // 返回app对象
          return {
            mount(selector) {
              // 1. 找到宿主元素
              const parent = querySelector(selector)
              // 2. 渲染页面
              if (!options.render) {
                // 2.1 处理template： 编译
                options.render = this.compile(parent.innerHTML)
              }

              // 收集 setup 和其他选项
              if (options.setup) {
                this.setupState = options.setup()
              }
              if (options.data) {
                this.data = options.data()
              }

              // 渲染之前，处理setup和其他选项的兼容
              const proxy = new Proxy(this, {
                get(target, key) {
                  // 先从setup中取，如果取不到再从data中取
                  // 如果setup存在，且key在setup中定义过
                  if (target.setupState && key in target.setupState) {
                    // return target.setupState[key]
                    return Reflect.get(target.setupState, key)
                  } else {
                    // return target.data[key]
                    return Reflect.get(target.data, key)
                  }

                },
                set(target, key, val) {
                  if (target.setupState && key in target.setupState) {
                    return Reflect.set(target.setupState, key, val)
                  } else {
                    return Reflect.set(target.data, key, val)
                  }
                }
              })


              this.update = effect(() => {

                const vnode = options.render.call(proxy)
                // 转换vnode为dom
                // 初始化创建整棵树
                if (!this.isMounted) {

                  // 实现 createElm， 整体创建，vnode -> el
                  const el = this.createElm(vnode)
                  parent.innerHTML = ''
                  insert(el, parent)
                  // init 初始化，设置已挂载标识
                  this.isMounted = true
                } else {
                  this.patch(this._vnode, vnode)
                }
                this._vnode = vnode
              })
            },
            patch(oldNode, newNode) {
              const el = newNode.el = oldNode.el
              // 1. 更新：必须更新相同节点
              // 什么样的是相同节点
              if (oldNode.tag === newNode.tag && oldNode.key === newNode.key) {
                // update 相同节点，更新

                const oldChild = oldNode.children
                const newChild = newNode.children

                if (typeof oldChild === 'string') {
                  if (typeof newChild === 'string') {
                    // 文本更新
                    if (oldChild !== newChild) {
                      el.textContent = newChild
                    }
                  } else {
                    // 替换文本为一组子元素，清空再创建并追加
                    el.textContent = ''
                    newChild.forEach(child => insert(this.createElm(child), el))

                  }

                } else {
                  if (typeof newChild === 'string') {
                    // 替换一组子元素为文本
                    el.textContent = newChild
                  } else {
                    // updateChildren 比较两组子元素
                    this.updateChildren(el, oldChild, newChild)
                  }
                }
              } else {
                // replace 不相同节点，替换
              }
            },
            updateChildren(el, oldChild, newChild) {
              // 1.获取newCh和oldCh中较短的那一个
              const len = Math.min(oldChild.length, newChild.length)
              // 强制更新
              for (let i = 0; i < len; i++) {
                this.patch(oldChild[i], newChild[i])
              }

              // 处理剩余元素
              // 新数组元素多
              if (newChild.length > oldChild.length) {
                // 批量创建并追加
                // 截取newCh中len后面的部分
                newChild.slice(len).forEach(child => {
                  insert(this.createElm(child), el)
                })
              } else if (newChild.length < oldChild.length) {
                // 批量删除
                oldChild.slice(len).forEach(child => {
                  remove(child.el, el)
                })
              }
            },
            createElm(vnode) {
              const {
                tag,
                props,
                children
              } = vnode
              // 遍历vnode，创建整棵树
              const el = createElement(tag)
              // 递归
              // 判断children是字符串
              if (typeof children === 'string') {
                el.textContent = children
              } else {
                children.forEach(child => insert(this.createElm(child), el))
              }
              // vnode中要保存真实DOM，以备未来更新使用
              vnode.el = el
              return el
            },
            compile(template) {
              // 返回一个render函数
              // parse -> ast
              // generate: ast -> render
              return function render() {
                if (Array.isArray(this.title)) {
                  return h('h3', null, this.title.map(s => h('p', null, s)))
                } else {
                  return h('h3', null, this.title)
                }
                // const h3 = document.createElement('h3')
                // h3.textContent = this.title
                // return h3
                // 应该产生虚拟DOM
                // return h('h3', null, this.title)
                // return h('h3', null, [
                //   h('p', null, this.title),
                //   h('p', null, this.title),
                //   h('p', null, this.title)
                // ])
              }
            },

          }
        }
      }
    },

    createApp(options) {
      // 创建一个web平台特有的渲染器
      const renderer = Vue.createRenderer({
        querySelector(sel) {
          return document.querySelector(sel)
        },
        insert(el, parent) {
          parent.appendChild(el)
        },
        createElement(tag) {
          return document.createElement(tag)
        },
        remove(el, parent) {
          parent.removeChild(el)
        }
      })
      return renderer.createApp(options)
    }

  }
</script>

<script>
  // 内容拦截用户对代理对象的访问，从而在值发生变化的时候做出响应
  function reactive(obj) {
    // 返回代理的对象
    return new Proxy(obj, {
      get(target, key) {
        console.log('get key:', key)
        track(target, key)
        return Reflect.get(target, key)
      },
      set(target, key, val) {
        console.log('set key:', key)
        Reflect.set(target, key, val)

        trigger(target, key)
      }
    })
  }

  // 建立映射关系： 依赖 Dep -> 组件更新函数


  // 调用effect，首先执行fn
  // 临时存储副作用函数 effectStack
  const effectStack = []

  function effect(fn) {
    // 1. 执行一次fn
    // fn()
    const eff = function () {
      try {
        effectStack.push(eff)
        fn()
      } finally {
        effectStack.pop()
      }
    }
    // 立即调用一次
    eff()
    // 将这个函数返回出去
    return eff
  }

  // Vue3: 创建map结构 { target: {key: [update1, update2]} }
  const targetMap = {
    // 应该往里面存这样的数据，依赖关系
    // state: {
    //   'title': [update]
    // }
  }

  // 建立 target,key 和 effectStack 中存储的副作用函数之间的关系
  function track(target, key) {
    // 拿出存储副作用函数的最后一个元素
    const effect = effectStack[effectStack.length - 1]
    // 写死的话是这样的，但是不能这样写，要不然每次都新创建一个对象
    // targetMap[target] = {}
    // targetMap[target][key] = [effect]
    // 所以应该先判断target为key的对象存不存在
    let map = targetMap[target]
    if (!map) {
      // 首次get这个target【不存在就给map初始化一下】 
      map = targetMap[target] = {}
    }

    let deps = map[key]
    if (!deps) {
      deps = map[key] = []
    }
    // 映射关系建立
    if (deps.indexOf(effect) === -1) {
      deps.push(effect)
    }
  }

  function trigger(target, key) {
    const map = targetMap[target]
    if (map) {
      const deps = map[key]
      if (deps) {
        deps.forEach(dep => dep())
      }
    }
  }
</script>


<script>
  const app = Vue.createApp({
    setup() {
      const state = reactive({
        title: 'hello, vue3 YK菌'.split("")
      })

      setTimeout(() => {
        state.title = '2秒后见到新的YK菌'.split("")
      }, 2000)

      return state
    }
  })
  app.mount('#app')
</script>

